<template>
	<view class="container">
		<view class="header">
			<view class="headerContent">
				<view class="contentLeft">
					<text class="searchIcon"></text>
					<input type="text" class="searchInput" placeholder="请输入关键字" @input="blurSearch" v-model="inputContent">
				</view>
				<text class="contentRight" @click="backToHome">取消</text>
			</view>
		</view>
		<view class="blurSearch">
			<view class="blurSearchItem" v-for="(blurSearchItem, index) in blurSearchList" :key="index" @click="getSearchDataList(blurSearchItem)">
				{{blurSearchItem}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="listScroll">
			<view class="listItem" v-for="(item, index) in searchDataList" :key="item.skuId">
				<img mode="widthFix" class="itemImg" :src="item.images" :alt="item.skuName">
				<view class="listContent">
					<view class="title">
						{{item.skuName}}
					</view>
					<view class="subTitle">
						{{item.skuSubTitle}}
					</view>
					<text class="price">¥{{item.price}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import smartisan from '@/utils/smartisan.js';
	import { throttle } from 'lodash';
	export default {
		data() {
			return {
				inputContent: '',
				searchDataList: [],
				blurSearchList: [],
			};
		},
		methods:{
			async getSearchDataList(searchData) {
				const result = await smartisan(`/product/search/sku?page=1&pageSize=20&keyword=${searchData}`);
				this.searchDataList = result.data.list;
				this.blurSearchList = [];
			},
			backToHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			blurSearch(event){
				// console.log(event);
				const f = throttle(async() => {
				try{
					const result = await smartisan(`/v1/search/suggest?keyword=${event.detail.value}`);
					this.blurSearchList = result.data;
				}catch(e){
					console.log('请求获取搜索数据失败');
				}
			},300, { 'trailing': true })
			f();
			} ,
		},
		onLoad(options) {
			this.getSearchDataList(options.searchData)
		},
	}
</script>

<style lang="stylus">
.container
		position: relative
		height: 100%
		.header
			top: 0
			left: 0
			height: 100upx
			width: 100%
			padding: 20upx 12.5upx
			background-color: #f5f5f5
			box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%)
			// box-sizing: border-box
			border-top: 2upx solid #cecece
			border-bottom: 2upx solid #ebebeb
			.headerContent
				display: flex
				align-items: center
				padding: 19.2upx 12.5upx
				.contentLeft
					width: 575upx
					height: 62.5upx
					box-shadow: inset 0 0.05rem 3px rgb(0 0 0 / 2%), inset 0 2px 4px rgb(0 0 0 / 15%), inset 0 0 0 0.05rem rgb(0 0 0 / 10%), 0 0.05rem 0.05rem 0 hsl(0deg 0% 100% / 10%)
					border: 2upx solid #ddd
					background: #fff
					border-radius: 30upx
					box-sizing: border-box
					display: flex
					align-items: center
					.searchIcon
						width: 62.5upx
						height: 62.5upx
						background-image: url('/static/images/search.png')
						background-size: 50upx 50upx
						background-position: 50% 50%
					.searchInput
						color: #757575
				.contentRight
					width: 125upx
					height: 62.5upx
					text-align: center
					line-height: 62.5upx
					box-sizing: border-box
					border: 2upx solid #d7d7d7
					border-radius: 10upx
					margin-left: 15upx
		.blurSearch
			position: absolute
			top: 144upx
			left: 0
			z-index: 998
			width: 100%
			.blurSearchItem
				z-index: 999
				position: relative
				width: 90%
				top: 0
				left: 0
				padding: 0 37.5upx
				overflow: hidden
				text-overflow: ellipsis
				white-space: nowrap
				font-size: 50upx
				height: 104upx
				line-height: 104upx
				padding: 0 38upx 0
				color: #333
				border-bottom: 2upx solid #ebebeb
				background-color: #f8f8f8
				font-weight: 700
		.listScroll
			width: 100%
			height: calc(100vh - 144upx)
			display: flex
			flex-direction: column
			align-items: center
			.listItem
				position: relative
				padding: 25upx 25upx
				display: flex
				align-items: center
				&::after
					position: absolute
					content: ""
					width: 100%
					height: 2upx
					left: 0
					right: 0
					bottom: 0
					background: #ebebeb
					transform: scaleY(.667)
					transform-origin: 0 100%
				.itemImg
					width: 252.08upx
					vertical-align: middle
					margin-right: 64.6upx
				.listContent
					display: flex
					flex-direction: column
					overflow: hidden
					.title
						overflow: hidden
						white-space: nowrap
						text-overflow: ellipsis
						font-weight: 700
						font-size: 25upx
						line-height: 31.2upx
						color: #333
					.subTitle
						width: 120%
						color: #7f7f7f
						font-size: 25upx
						transform: scale(.83333)
						transform-origin: 0 100%
						margin-top: 8.32upx
						line-height: 1.2
						white-space: nowrap
						overflow-x: hidden
						text-overflow: ellipsis
					.price
						color: #d44d44;
						display: inline-block
						white-space: nowrap
						font-weight: 700
						line-height: 1
						margin-top: 33.3upx
</style>
